<template>
  <div class="public_page_style">
    <div class="project_left">
      <div v-for="i in projectList" :key="i" :class="{'tab_bar_item':true,'active':i.name == checkItem}"
           @click="checkItem = i.name">
        {{ i.name }}
      </div>
    </div>

    <div class="project_right">
      <div :style="{'height': topIsUnfold + 'vh'}" class="right_images">
        <div class="right_images_title">
          {{ checkItem }}
        </div>

        <div style="margin: 0 0 0 2vh">
          暂无介绍...
          <br>
          请复制项目集地址拉取代码查阅
        </div>

        <div class="right_images_bottom" @click="who = who === 'top' ? 'bottom' : 'top'">{{
            who === 'top' ? '收起' : '展开'
          }}
        </div>
      </div>

      <div :style="{'height': bottomIsUnfold + 'vh'}" class="right_introduced">
        拉取项目集地址：git clone https://gitee.com/guojixin/bolg.git <br> <br>
        安装依赖：npm i <br> <br>
        启动项目：npm run dev <br> <br>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      who: 'bottom',
      checkItem: '',
      projectList: [
        {
          name: '新疆塔城开发开放试验区能源双碳服务平台',
        },
        {
          name: '西门子&绿色供应链',
        },
        {
          name: 'LTC一体化项目',
        },
        {
          name: '冠林：冀版数字教辅平台',
        },
        {
          name: '国资委：监督追责',
        },
        {
          name: 'DQbasic：微服务版本',
        },
        {
          name: '丛台：统一接口服务平台',
        }
      ]
    }
  },
  computed: {
    topIsUnfold() {
      if (this.who === 'top') return 60
      else return 20
    },
    bottomIsUnfold() {
      if (this.who === 'bottom') return 60
      else return 20
    }
  },
  created() {
    this.checkItem = this.projectList[0].name
  }
}
</script>

<style lang="scss" scoped>
.public_page_style {
  display: flex;

  .project_left {
    width: 15vw;

    .tab_bar_item {
      height: 5vh;
      //line-height: 5vh;
      padding: 0 2vw;
      border-radius: 1vh;
      cursor: pointer;
      margin: 2vh 0 0 0;
      transition: all .3s;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      //background: rgb(135, 208, 250);
      color: rgba(0, 0, 0);
    }
  }

  .project_right {
    flex: 1;
    margin-left: 2vw;

    .right_images {
      height: 20vh;
      background: #b9b9b9;
      margin-bottom: 2vh;
      border-radius: 2vh;
      position: relative;
      transition: all .4s;

      .right_images_title {
        text-align: center;
        font-size: 4vh;
      }

      .right_images_bottom {
        width: 100%;
        height: 5vh;
        line-height: 5vh;
        background: #23d5ab;
        position: absolute;
        border-radius: 2vh;
        text-align: center;
        bottom: 0;
        left: 0;
        cursor: pointer;
      }
    }

    .right_introduced {
      transition: all .4s;
      padding: 2vh;
      height: 20vh;
      background: #e5faff;
      border-radius: 2vh;
    }
  }
}
</style>
